<template>
	<view class="list colorSky">
		<!-- <view class="fixbg" :style="{'background-image' : 'url('+playList.coverImgUrl+')'}"></view> -->
		<view class="fixbg"></view>
		<musicHead title="歌单" :icon="true" color="#ffe0e5"></musicHead>
		<scroll-view scroll-y="true">
			<view class="container list-main" v-show="!isLoding">
				<view class="list-head colorSpring">
					<view class="list-head-img">
						<image :src="playList.coverImgUrl" mode=""></image>
						<text class="iconfont icon-bofang">{{playList.playCount | formatCount }}</text>
					</view>
					<view class="list-head-text">
						<view>{{playList.name}}</view>
						<view>
							<image class="img" :src="playList.creator.avatarUrl" mode=""></image>
							<!-- <text class="iconfont icon-bofang"></text> -->
							{{playList.creator.nickname}}
						</view>
						<view class="">
							{{playList.description}}
						</view>
					</view>
				</view>
				<button class="list-share colorSpring" open-type="share">
					<text>分享给微信好友</text>
				</button>
				<view class="list-music colorSky">
					<view class="list-music-head">
						<text class="iconfont icon-bofang1"></text>
						<text>播放全部</text>
						<text>(共{{playList.trackCount}}首)</text>
					</view>
					<view class="list-music-item" v-for="(item,index) in playList.tracks" :key="index" @tap="handleToDetail(item.id)">
						<view class="list-music-top">
							{{index+1}}
						</view>
						<view class="list-music-song">
							<view>{{item.name}}</view>
							<view>{{item.ar[0].name}}--{{item.name}}</view>
						</view>
						<text class="iconfont icon-bofang1"></text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import musicHead from "@/components/musicHead/musicHead.vue"
	import {list} from"@/common/api.js"
	export default {
		comments:{
			musicHead,
		},
		data() {
			return {
				playList:{
					coverImgUrl:'',
					creator:{
						avatarUrl:'',
					}
				},
				isLoding : true
			}
		},
		methods:{
			handleFocus(){
				uni.navigateTo({
					url:"/pages/index/index",
				})
			},
			handleToDetail(songId){
				uni.navigateTo({
					url:`/pages/detail/detail?songId=${songId}`
				})
			}
		},
		//页面加载完触发
		onLoad(options) {
			list(options.listId).then(res =>{
				if(res[1].data.code == '200'){
					this.playList = res[1].data.playlist
					this.isLoding = false
					this.$store.commit('setTopListIds',res[1].data.playlist.trackIds)
				}
			})
		},
	}
</script>

<style lang="less" scoped>
	.list-main{
		height: 60%;
	}
	.list-head{
		display: flex;
		margin: 0 30rpx;
		.list-head-img{
			width: 264rpx;
			height: 264rpx;
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			margin-right: 42rpx;
			image{
				width: 100%;
				height: 100%;
			}
			text{
				position: absolute;
				top: 8rpx;
				right: 8rpx;
				font-size: 26rpx;
			}
		}
	}
	.list-head-text{
		flex: 1;
		.list-head-text view:nth-child(1){
			font-size: 30rpx;
		}
		view:nth-child(2){
			display: flex;
			font-size: 14rpx;
			align-items: center;
			margin: 20rpx 0;
			.img{
				margin-right: 24rpx;
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
			}
		}
		view:nth-child(3){
			line-height: 32rpx;
			font-size: 22rpx;
		}
	}
	.list-share{
		width: 330rpx;
		height: 74rpx;
		margin: 40rpx auto;
		background: rgba(255,255, 255, 0.2);
		border-radius: 37rpx;
		line-height: 74rpx;
		font-size: 28rpx;
		text{}
	}
	.list-music{
		background: white;
		border-radius: 50rpx 50rpx 0 0;
		margin-top: 40rpx;
		.list-music-head{
			height: 50rpx;
			line-height: 50rpx;
			padding: 26rpx;
			margin: 30rpx 0 0 22rpx;
			text:nth-child(1){
				height: 50rpx;
				font-size: 40rpx;
			}
			text:nth-child(2){
				margin: 0 10rpx;
				font-size: 30rpx;
			}
			text:nth-child(3){
				font-size: 26rpx;
			}
		}
		.list-music-item{
			display: flex;
			margin: 0 32rpx 44rpx 32rpx;
			.list-music-top{
				width: 60rpx;
				height: 100%;
				text-align: center;
				line-height: 60rpx;
				margin-right: 20rpx;
			}
			.list-music-song{
				flex: 1;
				view:nth-child(1){
					font-size: 28rpx;
					font-weight: bold;
					width: 70vw;
					margin-bottom: 10rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				view:nth-child(2){
					font-size: 20rpx;
					width: 70vw;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			text{
				font-size: 50rpx;
				line-height: 60rpx;
			}
		}
	}
</style>